<template>
    <div class="shuo" ref="shuo" @scroll="binScroll">
        <div ref="box">
        <div class="item" v-for="(item,i) in data" :key="i">
            <div class="left">
                <img :src="item.img" alt="" @click="bint1(item.id)">
            </div>
            <div class="right">
                <div class="title">{{item.n}}</div>
                <div class="text">{{item.recommend_label}}</div>
                <div class="user">
                    <div class="userImg">
                        <img :src="item.a.p" alt="">
                    </div>
                    <div class="userName">{{item.a.n}}</div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'shou',
        data() {
            return {
                data:[],
                id:0,
                titer:0
            }
        },
        created(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/ufavorites/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.recipes
            })
        },
        activated(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/ufavorites/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.recipes
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.box.scrollHeight-this.$refs.shuo.scrollTop===this.$refs.shuo.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/user/ufavorites/${this.id}/${length}/10`). then((response) => {
                            if (response.data.state=== "success") {
                                this.data.push(...response.data.result.recipes)  
                            }
                        })
                    }
                },300)
            },
            bint1(id){
                this.$router.push({name:'type1',query:{id}})
            },
        }
    }
</script>

<style lang="less" scoped>
    .shuo{
        height: calc(100vh - 331px);
        overflow: auto;
        .item{
            display: flex;
            padding-bottom: 10px;
            .left{
                width: 40%;
                height: 100px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                padding-left: 10px;
                box-sizing: border-box;
                width: 60%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .title{
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .text{
                    margin-top: 10px;
                }
                .user{
                    margin-top: 10px;
                    height: 21px;
                    display: flex;
                    .userImg{
                        height: 100%;
                        img{
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    .userName{
                        margin-left: 10px;
                        line-height: 21px;
                    }
                }
            }
        }
    }
</style>